<template>
  <div class="container contract-review pb">
    <p class="bread">
      <a href="#/lawyer-center/lawyer-order">订单管理</a>
    </p>
    <div class="bg-c-fff box-border">
      <h3 class="tm-title">法律服务</h3>
      <step :stepData="stepData" :stepNum="stepNum" @stepRouter="stepRouter"></step>
    </div>
    <form @submit.prevent="onBindClick" class="content" novalidate="true">
      <div class="bg-c-fff box-border box">
        <p class="tc title">
          法律服务通知单
        </p>
        <ul class="fix box-border-top monitor-box">
          <li class="flo-left tc">法律服务客户账号</li>
          <li class="flo-right fix">
            <input type="text" placeholder="请输入客户账号" v-model="number" class="input-css" :disabled="this.status>=1">
            <i class="iconfont icon-asterisk"></i>
          </li>
        </ul>
        <ul class="fix box-border-top monitor-box">
          <li class="flo-left tc">法律服务内容</li>
          <li class="flo-right fix">
            <textarea v-model="con" :disabled="this.status>=1"></textarea>
          </li>
        </ul>
        <ul class="fix box-border-top monitor-box">
          <li class="flo-left tc">法律服务合同</li>
          <li class="flo-right fix" v-show="!this.$route.query.id">
            <input type="button" value="选择文件" class="blue-button" id="selectBtn">
            <input type="button" value="上传" class="blue-button" @click="startUpload">
            <span class="uploaded-file">{{contractUrl | fileName}}</span>
          </li>
          <li class="flo-right fix" v-show="this.$route.query.id">
            <a :href="fileUrl" class="blue-button xl-btn-css db">查看文件</a>
          </li>
        </ul>
        <ul class="fix box-border-top monitor-box">
          <li class="flo-left tc">合同标价</li>
          <li class="flo-right fix">
            <input type="number" placeholder="请输入数字" class="input-css" v-model.number="money" :disabled="this.status>=1" step="0.01">
            <i class="iconfont icon-asterisk"></i>
            <span>元</span>
          </li>
        </ul>
      </div>
      <div class="box bg-c-fff box-border auto tc button" v-show="!this.$route.query.id">
        <input type="submit" value="提交订单" class="blue-button">
        <input type="button" value="取消" class="white-button" @click="onCancel">
      </div>
    </form>
  </div>
</template>
<script type="text/javascript">
import Step from '../components/Step'
import FileUploaderManager from '../components/FileUploaderManager'
export default {
  components: {
    Step
  },
  data() {
    return {
      stepNum: 0,
      stepData: [{
        name: '创建新订单'
      }, {
        name: '客户确认'
      }, {
        name: '监控员绘制流程图'
      }, {
        name: '法律服务监控'
      }, {
        name: '服务完成'
      }],
      number: '',
      con: '',
      money: '',
      contractUrl: '',
      fileUrl: '',
      status: ''
    }
  },
  mounted() {
    this.initUploader()
    if (this.$route.query.id) {
      this.$http.get('/legalService/read/detail', {
        params: {
          id: this.$route.query.id
        }
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.status = data.data.data.status
          this.number = data.data.data.customerName
          this.con = data.data.data.content
          this.fileUrl = data.data.data.contract
          this.money = data.data.data.contractPrice / 100
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    }
  },
  methods: {
    startUpload() {
      if (this.uploader.startUpload()) {

      } else {
        this.$toasted.show('正在上传文件，请稍后再试')
      }
    },
    initUploader() {
      this.uploader = new FileUploaderManager('lawyer-contract', 'selectBtn', (url) => {
        this.contractUrl = url
        this.$toasted.show('上传成功')
      }, (msg) => {
        this.$toasted.show(msg)
      })
    },
    onBindClick() {
      if (!this.number) {
        this.$toasted.show('客户账号不能为空')
        return
      }
      if (!this.con) {
        this.$toasted.show('法律服务内容不能为空')
        return
      }
      if (!this.contractUrl) {
        this.$toasted.show('请上传合同文件')
        return
      }
      if (!this.money) {
        this.$toasted.show('合同金额不能为空')
        return
      }
      if (this.money <= 0) {
        this.$toasted.show('合同金额为正数')
        return
      }
      if (!/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(this.money)) {
        this.$toasted.show('合同金额请输入两位小数')
        return
      }
      this.$http.post('/legalService/lawyer/createService', {
        business: this.number,
        content: this.con,
        contract: this.contractUrl,
        contractPrice: this.money * 100
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('创建成功')
          this.$router.push('/lawyer-customert-confirm')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    onCancel() {
      window.history.back()
    },
    stepRouter(i, name) {
      if (i === 0 && this.status >= 1) {
        this.$router.push('/lawyer-establish?id=' + this.$route.query.id)
      }
      if (i === 1 && this.status >= 1) {
        this.$router.push('/lawyer-customert-confirm?id=' + this.$route.query.id)
      }
      if (i === 2 && this.status >= 2) {
        this.$router.push('/lawyer-mapping?id=' + this.$route.query.id)
      }
      if (i === 3 && this.status >= 3) {
        this.$router.push('/lawyer-monitor?id=' + this.$route.query.id)
      }
      if (i === 4 && this.status >= 4) {
        this.$router.push('/lawyer-finish?id=' + this.$route.query.id)
      }
    }
  },
  filters: {
    fileName(v) {
      if (!v) {
        return ''
      } else {
        let arr = v.split('/')
        return '已上传 ' + arr[arr.length - 1]
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.box-border {
  border: 1px solid #ddd;
}

.tm-title {
  line-height: 40px;
  padding-left: 35px;
  font-size: 14px;
  color: #282828;
  border-bottom: 1px solid #ddd;
}

.content .box {
  margin-top: 20px;
}

.pb {
  padding-bottom: 70px;
}

.blue-button {
  width: 121px;
  height: 35px;
}

.button .white-button,
.button .blue-button {
  width: 245px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 40px 15px;
}

.content .box .box-border-top {
  border-top: 1px solid #ddd;
}

.content .box ul li.flo-left {
  border-right: 1px solid #dddddd;
  width: 396px;
}

.content .box ul li.flo-right {
  width: 800px;
  padding: 20px 0 20px 100px;
}

.content .box ul li.flo-right p {
  line-height: 30px;
}

form .monitor-box:nth-of-type(1) li.flo-left {
  line-height: 100px;
}

form .monitor-box:nth-of-type(2) li.flo-left {
  line-height: 150px;
}

form .monitor-box:nth-of-type(3) li.flo-left {
  line-height: 75px;
}

form .monitor-box:nth-of-type(3) li.flo-left .blue-button {
  width: 100px;
  height: 40px;
}

form .monitor-box:nth-of-type(4) li.flo-left {
  line-height: 80px;
}

form .monitor-box input[type="text"],
form .monitor-box input[type="number"],
form .monitor-box textarea {
  width: 350px;
}

form .monitor-box input[type="file"] {
  width: 120px;
  height: 35px;
  left: -125px;
  top: -6px;
}





























































































































































































































































/*.monitor-box input.input-css {
  width: 400px;
  margin-top: 11px;
}

*/


/*.monitor-contact li.flo-left {
  line-height: 115px;
}*/

form .monitor-box:nth-of-type(2) textarea {
  height: 100px;
  padding: 10px 8px;
  border: 1px solid #ddd;
}

.icon-asterisk {
  color: #ec5303;
  font-size: 28px;
  position: relative;
  left: -30px;
  top: 6px;
}

.monitor-box li span {
  margin-left: -26px;
}

p.title {
  height: 40px;
  line-height: 40px;
}

.vodal-box h2 {
  background-color: #d8e7ff;
  font-size: 14px;
  font-weight: bold;
  line-height: 40px;
  text-indent: 40px;
}

.vodal-box .con {
  margin: 30px 20px;
  padding: 40px 25px;
  border: 1px solid #ddd;
  line-height: 30px;
}

.vodal-box button {
  margin: 0 15px;
}

.monitor-box .uploaded-file {
  margin-left: 10px;
}

.monitor-box a {
  line-height: 34px;
}

</style>
